<template>
	<view>
		<uni-nav-bar :city="city"></uni-nav-bar>
		<view class="container_tab" style="box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);padding-top: 44px;">
			<view class="container_item" :class="item.id===TabCur?'current':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect(item.id)">
				<span class="item_title">{{item.catName}}</span>
			</view>
		</view>
		<view class="content">
			<view class="content_lunbo">
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
					<swiper class="card-swiper" :autoplay="true" interval="3000" duration="500" :circular="true"
						@change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
						<swiper-item v-for="(item,index) in swiperList" :key="index" :class="current==index?'cur':''">
							<view class="swiper-item">
								<image :src="item.url" class="swiper-item-img" mode="widthFix" v-if="item.type=='image'"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="title_item" style="height: 28px;">
				<span class="title_img"></span>
				<view>生活服务</view>
			</view>
			<view class="container_tab">
				<view class="container_item" v-for="(item,index) in services1" :key="index" @tap="tabService(item.id)">
					<image class="item_img" :src="item.img" mode="widthFix"></image>
					<span class="item_title">{{item.name}}</span>
				</view>
			</view>
			<view class="container_tab">
				<view class="container_item" v-for="(item,index) in services2" :key="index" @tap="tabService(item.id)">
					<image class="item_img" :src="item.img" mode="widthFix"></image>
					<span class="item_title">{{item.name}}</span>
				</view>
			</view>
			<view class="uni-swiper-msg" style="box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);">
				<view class="uni-swiper-msg-icon">
					商城新闻
					<!-- <image src="../../static/icon/hot.png" mode="widthFix"></image> -->
				</view>
				<view style="width: 2px; height: 50%; background-color: #FDD819;"></view>
				<swiper class="uni-swiper-list" vertical="true" autoplay="true" circular="true" interval="3000">
					<swiper-item v-for="(item, index) in msg" :key="index"">
						<navigator>{{item}}</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="title_item" style="height: 28px;">
				<span class="title_img"></span>
				<view>品质优选</view>
			</view>
			<view class="product_poster"> 
				<view class="product_poster_left">
					<image  src="../../static/product/gai.jpg" mode="widthFix" style="border-bottom: 1px solid #f0f0f0;" @click="toGood(1)"/>
					<image src="../../static/product/dami.jpg" mode="widthFix" @click="toGood(2)"/>
				</view>
				<image class="product_poster_right" src="../../static/product/you.jpg" @click="toGood(3)" />
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import product from '@/components/product/index.vue'
	import cricleBackground from '@/components/cricle-background/cricle-background.vue'
	import {getCookie, setCookie} from '@/utils/cookiesUtil.js'
	import addressApis from '@/common/services/address.js'
	import api from '@/common/services/api.js'; 
	export default {
		components: {
			uniSwiperDot,
			product,
			cricleBackground,
			uniNavBar
		},
		onShow(){
			addressApis.getIpAddress().then(res => {
				this.city = (res && res.ad_info && res.ad_info.city) || uni.getStorageSync('city');
			})
		},
		onLoad() {
			addressApis.getIpAddress().then(res => {
				this.city = (res && res.ad_info && res.ad_info.city) || uni.getStorageSync('city');
			})
		},
		data() {
			return {
				city: '', // 手机ip定位所在的城市
				current: 0,
				TabCur: -1,
				tabs: [{id: -1, catName: '推荐'}, {id: 0, catName: '衣'}, {id: 1, catName: '食'}, {id: 2, catName: '住'}, {id: 3, catName: '行'}, {id: 4,  catName: '用'}],
				services1: [{
					id: 1,
					name: '家政',
					img: require('../../static/service/1.png')
				},{
					id: 2,
					name: '教育',
					img: require('../../static/service/2.png')
				},
				{
					id: 3,
					name: '文化',
					img: require('../../static/service/3.png')
				},
				{
					id: 4,
					name: '旅游',
					img: require('../../static/service/4.png')
				}
				],
				services2: [{
					id: 5,
					name: '事业',
					img: require('../../static/service/5.png')
				},
				{
					id: 6,
					name: '健康',
					img: require('../../static/service/6.png')
				},{
					id: 7,
					name: '公益',
					img: require('../../static/service/7.png')
				},
				{
					id: 8,
					name: '理财',
					img: require('../../static/service/8.png')
				},],
				swiperList: [{
					id: 0,
					type: 'image',
					url: '../../static/product/banner5.png'
				}, {
					id: 1,
					type: 'image',
					url: '../../static/product/banner9.jpeg'
				},
				{
					id: 2,
					type: 'image',
					url: '../../static/product/banner7.png'
				},
				{
					id: 3,
					type: 'image',
					url: '../../static/product/banner8.jpeg'
				},{
					id: 4,
					type: 'image',
					url: '../../static/product/banner6.png'
				}],
				dotStyle: true,
				towerStart: 0,
				direction: '',
				dotsStyles: {
					color: '#fff',
				},
				info: [{
					content: '五常大米'
				}, {
					content: '亚麻籽油'
				}, {
					content: '华好钙'
				},{
					content: '内容 A'
				},{
					content: '内容 A'
				}],
				mode: 'long',
				msg : [
					'中秋团圆大礼包，把健康送给家人',
					'柴米油盐酱醋茶尽显品质',
					'锅碗瓢盆交响曲诠释生活'
				]
			};
		},
		methods:{
			toGood(index){
				const goodsIds = ['2d1ef50e6cd4d52d45a410bd7385d9f2', '4365e28e8049568d133ee192d354b825', '5e596034fe4885e60df5b0f0df088ad6']
				uni.navigateTo({
					url: `../goods/goods?goodsId=${goodsIds[index -1]}`
				})
			},
			// 跳转生活服务页面
			tabService(state) {
				uni.navigateTo({
					url: `../messageList/messageList?state=${state - 1}`
				})
			},
			// app 可以使用
			setCity(city) {
				uni.setTabBarItem({
					index: 0,
					text: city,
					background: "transparent",
					color: "rgba(255, 255, 255, 0.9)",
					float: "left",
					fontSize: "14px",
					fontWeight: "bold",
					select: "true",
					width: "24px",
					success: res => {
						console.log('res:', res)
					},
					fail: err => {
						console.log('err:', err)
					},
				})
			},
			// cardSwiper
			cardSwiper(e) {
				this.current = e.detail.current
				// 页面跳转 如果用户点击 就跳转到对应的商品详情 	
				// 	uni.navigateTo({
				// 	url: '../search/search',
				// 	animationType: 'pop-in',
				// 	animationDuration: 200
				// });
			},
			tabSelect(state) {
				if (state === -1 ) return false;
				uni.setStorageSync('tabCur', state)
				uni.switchTab({
					url: '../class/index',
				})
				// window.location.href = `http://${window.location.host}/pages/class/index?state=${state}`;
			}
		},
	}
</script>

<style lang="scss" scoped>
page {
	background-color: white;
}
.container_tab {
	display: flex;
	background-image: linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
	.current {
		font-weight: 700;
		color: #E80505 !important;
		&:after{
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
			width: 26upx;
			height: 0;
			border-bottom: 2px solid #E80505;
		}
	}
	.container_item {
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
		height: 28px;
		padding: 0 5px;
		position: relative;
		z-index: 10;
		color: #303133;
		.item_title {
			font-size: 28upx;
			font-family: "Microsoft YaHei"；
			&:hover {
				color: #E80505;
			}
		}
	}
}
.content {
	padding: 2upx 0upx 160upx;
	.container_tab {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 10upx;
		.container_item {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: white;
			position: relative;
			height: 126upx;
			// padding: 16upx 5upx;
			box-sizing: border-box;
			color: #303133;
			.item_title {
				font-size: 26upx;
				font-family: "Microsoft YaHei"；
				&:hover {
					color: #E80505;
				}
			}
			.item_img {
				display: inline-block;
				width: 80upx;
				height: 80upx;
			}
		}
	}
	.content_lunbo {
		// padding: 20upx;
		.uni-swiper__warp {
			// border-radius: 20upx;
			.card-swiper {
				width: 100%;
				// height: 240px;
				.swiper-item {
					width: 100%;
					.swiper-item-img {
						width: 100%;
					}
				}
			}
		}
	}
	img{
		width: 100%;
	}
	.uni-swiper-msg {
		width: 100%;
		height: 60upx;
		display: flex;
		overflow: hidden;
		align-items: center;
		padding: 5upx 20upx;
		box-sizing: border-box;
		.uni-swiper-msg-icon {
			width: 120upx;
			flex: 0.8;
			line-height: 60upx;
			color: #E80505;
			font-weight: bold;
		}
		.uni-swiper-list {
			// width: 80%;
			flex: 3;
			height: 100%;
			font-size: 26upx;
			font-weight: 350;
			margin-left: 20upx;
			line-height: 68upx !important;
			color: #333;
		}
	}
	.title_item {
		margin-top: 10upx;
		padding: 0 10upx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		height: 56upx;
		line-height: 56upx;
		box-sizing: border-box;
		.title_img {
			display: inline-block;
			width: 4px;
			height: 30upx;
			border-radius: 5px;
			background-color: #E80505;
			margin-right: 12upx;
		}
	}
	.product_new {
		position:relative;
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F2EBDB;
		box-sizing: border-box;
		&:after{
			position: absolute;
			bottom: -20upx;
			content: '';
			width: 0;
			height: 0;
			border-left: 40upx solid transparent;
			border-right: 40upx solid transparent;
			border-top: 40upx solid #F2EBDB;
		}
	}
	.product_detail {
		margin-top: 20upx;
	}
	.product_poster {
		width: 100%;
		display: flex;
		align-items: center;
		// padding: 0 0 0 10upx;
		box-sizing: border-box;
		.product_poster_left {
			flex: 3;
			display: flex;
			flex-direction: column;
			image {
				width: 160px;
				border-right: 1px solid #f0f0f0;
				&:hover {
					box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
					transform: translate(1px, 1px);
					transition-duration: 50;
					border-right: 0;
					border-bottom: 0;
				}
			}
		}
		.product_poster_right {
			flex: 3;
			padding: 36upx 0px;
		}
		
	}
	.product_interval {
		margin-top: 20upx;
	}
}
</style>
